<template>
  <div class="box">
    <div class="tip_box">
      <div class="img_box">
        <img
          src="https://p2.music.126.net/I2sunVE3Zy0zkdt3D3CXUA==/109951165905391465.jpg"
          alt=""
        />
      </div>

      <div class="introduce">
        <ul>
          <li class="li1 li clear">
            <button>歌单</button>
            <h2>超好听的翻唱集 伤感歌 emo合集</h2>
          </li>
          <li class="li2 li clear">
            <img src="../../assets/imgs/head_img.jpg" alt="" />
            <a href="#">Pluto</a>
            <p class="time">2022-4-22</p>
          </li>
          <li class="li3 li clear">
            <div class="play">
              <i class="el-icon-caret-right"></i>
              <p>播放全部</p>
              <div class="xian"></div>
              <i class="el-icon-plus"></i>
            </div>
            <div class="add but">
              <i class="el-icon-folder-add"></i>
              <p>收藏(1万)</p>
            </div>
            <div class="share but">
              <i class="el-icon-share"></i>
              <p>分享(298)</p>
            </div>
            <div class="download but">
              <i class="el-icon-download"></i>
              <p>全部下载</p>
            </div>
          </li>
          <li class="li1 li p clear">
            <p>标签</p>
            <a href="#">流行<span>/</span></a>
            <a href="#">伤感<span>/</span></a>
            <a href="#">翻唱<span>/</span></a>
          </li>
          <li class="li1 li p clear">
            <p>歌曲:</p>
            <p class="music_count">156</p>
            <p class="play_count">播放: 261万</p>
          </li>
          <li class="li1 li p clear">
            <p>简介:</p>
            <p>超好听的翻唱集 伤感歌 emo片段</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="list_box">
      <div class="navbar">
        <ul>
          <li :class="style == 0 ? 'nav_li' : ''" @click="handle(0)">
            <p>歌曲列表</p>
            <span></span>
          </li>
          <li :class="style == 1 ? 'nav_li' : ''" @click="handle(1)">
            <p>评论</p>
            <span></span>
          </li>
          <li :class="style == 2 ? 'nav_li' : ''" @click="handle(2)">
            <p>收藏者</p>
            <span></span>
          </li>
        </ul>

      </div>

       <div :class="style == 0 ? 'block' : 'none'" id="list1">
           <div class="list1_top">
           </div>

           <table class="list1_music">
               <tr class="h1">
                   <th width="10%">操作</th>
                   <th width="35%">标题</th>
                   <th width="15%">歌手</th>
                   <th width="15%">专辑</th>
                   <th width="5%">时间</th>
               </tr>

               <tr v-for="(val,index) in songs" :key="index" :class="(index+1)%2==0 ? 't1': 't2'" @click="paly(val.id)">
                   <td>
                       <p>0{{index+1}}</p>

                   </td>
                   <td>{{val.name}}</td>
                   <td>{{val.ar[0].name}}</td>
                   <td>{{val.al.name}}</td>
                   <td>{{'0'+Math.floor(val.dt/1000/60)+':'+Math.floor(60*(val.dt/1000/60-Math.floor(val.dt/1000/60)))}}</td>
               </tr>
           </table>
       </div>

        <div :class="style == 1 ? 'block' : 'none'" id="list2">2</div>

        <div :class="style == 2 ? 'block' : 'none'" id="list3">3</div>

    </div>
  </div>
</template>

<script>
import api from '../../assets/api/request'
export default {
  data () {
    return {
      style: 0,
      songs: []
    }
  },
  mounted () {
    this.$bus.$on('getUserMusicMenu', (uid) => {
      console.log(uid, 'zxc')
      this.getapi.getUserMusicMenu(uid).then((res) => {
        console.log(res)
      })
    })
    // console.log(this.$route.query.id);
    // let musicdetails = localStorage.getItem("musicdetails");
    // if (musicdetails!=undefined) {
    //     this.request.get('/playlist/track/all',{id: this.$route.query.id})
    //     .then((res) => {
    //     console.log(res)
    //     this.songs = res.songs
    //     localStorage.setItem("musicdetails", JSON.stringify(res.songs));
    // })
    // }else{
    //     this.songs = JSON.parse(localStorage.getItem("musicdetails"))
    //     console.log(this.songs)
    // }
  },
  methods: {
    handle (e) {
      console.log(e)
      this.style = e
    },
    paly (e) {
      Promise.all([this.request.get('/song/url', { id: e }), this.getapi.songDetail(e)])
        .then((res) => {
          console.log(res[1].songs, 111)
          this.$bus.$emit('play', res[0], res[1])
        })
    }
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}
.tip_box {
  width: 97%;
  height: 200px;
  margin: 15px auto;
  margin-left: 25px;
  display: flex;
}
.tip_box .img_box {
  width: 20%;
  height: 200px;
  background-color: antiquewhite;
}
.img_box img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.li {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.li1 {
  display: flex;
  margin-left: 10px;
}
.li1 button {
  width: 50px;
  height: 25px;
  border: 1px solid #ec4141;
  color: #ec4141;
  background-color: white;
  border-radius: 5px;
}
.li1 h2 {
  margin-left: 10px;
}

.li2 {
  display: flex;
  align-items: center;
}
.li2 img {
  width: 30px;
  height: 30px;
  float: left;
}
.li2 a {
  margin: 0 10px;
}
.li3 > div {
  width: 130px;
  height: 30px;
  margin-left: 10px;
  border-radius: 20px;
  border: 1px solid #d8d8d8;
  display: flex;
  align-items: center;
}
.li3 .play {
  background-color: #ec4141;
  color: white;
}
.play i {
  font-size: 1.5rem;
  margin-left: 5px;
}
.play p {
  margin-left: 5px;
}
.but {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d8d8d8;
}
.but i {
  font-size: 1.45rem;
}
.introduce .p {
  margin-top: 14px;
}
.introduce .p p {
  margin-right: 10px;
  color: #676767;
}
</style>

<style scoped>
.list_box {
  width: 100%;
  height: 100%;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}
.list_box .navbar {
  width: 100%;
  height: 50px;
  background-color: white;
  display: flex;

  margin: 0 auto;
}

.list_box .navbar ul {
  display: flex;
  align-items: center;
}
.navbar li {
  width: auto;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.navbar .nav_li span {
  width: 80%;
  height: 4px;
  display: block;
  background-color: #bf3e3e;
  position: relative;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
}
.navbar .nav_li span {
  background-color: #ec4141;
}
.navbar .nav_li p {
  font-size: 1.25rem;
  font-weight: 700;
}
#menu_list{
    width: 100%;
    height: 300px;
    background-color: #d8d8d8;
}
.block {
  float: left;
  display: block;
}
.none {
  display: none;
}
</style>

<style scoped>
#list1{
    width: 95%;
    height: 600px;
    background-color: white;
    margin: 0 auto;
}
.list1_music{
    width: 100%;
    height: 75px;
    border: 0;
}
.list1_music .h1 th{
    text-align: left;
}
.list1_music td,th{
    height: 35px;
    border: 0;

}

.list1_music tr:hover{
    background-color: #f0f1f2;
}

.list1_music .t2{
    background-color: #f9f9f9;
}
</style>
